<!DOCTYPE html>
<html>

<head>
    <title>Vue , Hello World.</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/h5style/css/import-min.css">
    <!-- 1.7.1/1.11.1/2.1.1 -->
    <script type="text/javascript" src="http://space.cdn.ports-intl.com/Ports/Ports-intl/common/Lib/jQuery/Lib/jquery-1.7.1.min.js"></script>
    <style type="text/css">
        .ss{font-size: 18px; color: green;}
    </style>
</head>
<script src="vue.js"></script>

<body>
    <div id="app">

        <ul>
        	<li v-for="item in items">
        		<p v-bind:class="calClass(item)">{{item.name}}</p>
        	</li>
        	<todo txt1='todo111111' v-bind:items="items"></todo>
        </ul>
        <br><br><br><br><br><br><br>
        <component :is="currentView" message="ssss" h3="h333333333" v-bind:items="items"></component>
    </div>
    <script type="text/template" id="tpl">
    	<div>
			<h3>{{h3}}</h3>
			<div>{{message}}</div>
			<div>
				<ul>
					<li v-for="item in items">{{item.name}}</li>
				</ul>
			</div>
		</div>
	</script>
</body>
<script type="text/javascript">
var datas = [
    { "name": "aa1476459565", "age": 25, "mobile": "1366575177" },
    { "name": "aa1476459565", "age": 26, "mobile": "1366575177" }
];
var listVM = Vue.extend({
	template: '#tpl',
	props: ["h3","message","items"]
});

// Vue.component('todo', {
//   template: '<li>This is a {{todo.name}}</li>',
//   props: ['todo']
// });
Vue.component('todo', {
  props: ['items','txt1'],
  template: '<div><li v-for="item in items">{{item.name}}</li></div>'
});

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!',
    	items: datas ,
    	currentView: "listVM1"
    },
    methods:{

        calClass:function(vo){
            return {
                "ss" : vo.age == 25
            }
        },
    	reverseMessage: function(){
    		// $.ajax({
    		// 	type: "POST",
    		// 	url: "response.json",
    		// 	headers: {},
    		// 	data: "",
    		// 	dataType: "json",// html/json/jsonp/xml
    		// 	success: function(msg){
    		// 		// console.log(msg);
    		// 		// console.log(msg);
    		// 		datas.push.apply(datas,msg.data);
    		// 		// this.items.push(msg.data);
    		// 		// this.message = 'sss';
    		// 		// for(x in msg.data){
    		// 		// 	console.log(msg.data[x].name);
    		// 		// }
    		// 		console.log(datas);
    		// 	},
    		// 	error: function(){
    				
    		// 	}
    		// });
            this.message = 'Click Me !';
            // this.items.push.apply(this.items,{ "name": "aa1476459565", "age": 25, "mobile": "1366575177" });
            console.log(this.message);
    	}
    },
    components:{
    	'listVM1': listVM
    }
});


</script>

</html>
